<template>
  <div>
    {{ this.txt }}
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { getLyricByMid } from "./service";
import Lyric from "lyric-parser";
export default {
  props: ["paused"], // 歌曲的暂停状态
  data() {
    return {
      txt: "暂无歌词",
    };
  },
  computed: {
    ...mapGetters(["currSong"]),
  },
  methods: {
    seek(time) {
      // 控制歌词的跳转
      this.lyricObj.seek(time * 1000);
    },
    async getLyricData() {
      const { mid } = this.currSong;
      const { code, result } = (await getLyricByMid(mid)) || {};
      if (code) return false;
      let lyricStr = result.lyric;
      // console.log(lyricStr);
      // 插件使用全局计时器实现的 开始一个新的之前把原先的关掉
      if (this.lyricObj) {
        this.lyricObj.stop();
        this.lyricObj = null;
      }
      // 通过解析插件创建解析对象 参数1 要解析的歌词 参数2 播放歌词的回调 歌词信息，行数
      this.lyricObj = new Lyric(lyricStr, (txt) => {
        this.txt = txt;
      });
      // if (!this.paused) {
      // this.lyricObj.play();
      // }
      // console.log(lyricObj);
    },
  },
  // mounted() {
  //   this.getLyricData();
  // },
  watch: {
    paused(newV) {
      console.log("暂停状态改变", newV);
      // false -> true 音乐从播放 到暂停
      // 根据歌曲的播放状态控制 歌词的播放
      if (!this.lyricObj) return false;
      this.lyricObj.togglePlay();
      // if (newV) {
      //   // 歌词要停掉
      //   // this.lyricObj.stop();
      //   this.lyricObj.togglePlay();
      // } else {
      //   this.lyricObj.play();
      // }
    },
    currSong: {
      immediate: true,
      handler() {
        this.getLyricData();
      },
    },
    // currSong() {
    //   this.getLyricData();
    // },
  },
};
/*
1. 切换一首歌 请求一次歌词 = 监听歌曲的改变

*/
</script>
